/* 
bfc是用来解决margin塌陷的问题
如何触发bfc:下面几个方法都可以触发bfc
    position: absolute;
    display: inline-block;
    float: left/right;
    overflow: hidden;
*/


/*
盒模型三大部分
盒子的组成部分
盒子壁 border
内边距 padding
内容  width height



盒子模型：margin + broder + padding + (center = width + height)
*/



*{
    margin: 0;
    padding: 0;
    list-style: none;  /*去掉ul li的圆点*/
    text-decoration: none;  /*去掉a标签的下划线*/
}

em{
    font-style: normal;/*去掉em标签的斜体*/
}




/* 字体 */
div{
    font-size: 50px; /*设置字体大小*/
    font-weight: bold; /*字体加粗*/
    font-style: italic;/*设置字体样式*/
    font-family: 楷体; /*设置成什么字体*/
    text-decoration: underline; /*给字体设置下换线*/
    cursor: pointer;  /*将光标变成小手*/
}


/* 文本 */
div{
    text-align: center;  /*字体左右居中显示*/
    line-height: 100px;  /*当行高等高的时候字体就会上下居中*/
    text-indent: 2em;   /*段落首航缩进2个字符*/
    /* 1em = 1 font-size = 16px */
    text-shadow: 5px 5px 5px #000; /*字体阴影css3内容*/
    /* 单行文本超出点点点展示，就用下面的参数 */
    white-space: nowrap;  /*当文本超出父级宽的，不换行*/
    overflow: hidden;  /*溢出部分隐藏*/
    text-overflow:ellipsis;  /*文字溢出点点点展示*/
    vertical-align: -50px;   /*文字默认是底对齐，这个是调文字的对其方式*/
    writing-mode: tb-rl;  /*文字竖着展示*/
}

/* 多行文本超出点点点展示 */
div{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*
三原色分两种：
    美术里面的三原色叫：红黄蓝
    光学三原色叫：红绿蓝
设置颜色的三种方式：
    1.土鳖式(纯英文单词) 例如：green red black yellow 等等
    2.颜色代码(开发使用这种)
        #00-ff(红色饱和度) 00-ff(绿色饱和度)  00-ff(蓝色饱和度)
        一个颜色中，两个颜色代码相同可以简写为一个 例如：#ffffff  可以简写为#fff
    3.颜色函数
        rgb(0-255,0-255,0-255)
*/
/* 颜色 */
div{
    color: #000;  /*transparent透明色*/
    opacity: 0.5; /*半透明*/
}



/* 块级元素block  行级元素inline  行级块元素：inline-block */
div{
    display: inline-block;
    overflow: hidden;  /*溢出部分隐藏*/
}


/* 图片 */
div{
    background-image: url(a.jpg);
    background-size: 10px 10px; /*第一个值是宽，第二个值是高*/
    background-repeat: no-repeat;  /*当一张图片无法铺满的时候，不重复出现*/
    background-position: 10px 10px;  /*第一个值是x轴，第二个值是y轴*/
}


/* 设置边框 */
div{
    border: 1px solid black;  
    border-width: 1px;
    border-style: solid;
    border-color: red;
    border-radius: 10px; /*圆角*/

}



/* 定位：absolute */
div{
    /* 保留原来位置进行定位相对自己原来的位置定位 */
    position: relative;  /*相对定位*/
    left: 10px;
    top: 10px;
}
div{
    /* 脱离原来位置进行定位，最近的有定位的父级定位，
       如果没有，那么性对于文档进行定位
    */
    position: absolute;  /*绝对定位*/
    left: 10px;
    top: 10px;
}
div{
    position: fixed; /*固定的定位，不会被滚动条划走*/
    left: 0;
    top: 0;
    z-index: 999;  /*设置层次999就是最上层*/
}





/* 浮动float */
/*
浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素


1.解决浮动流的方法，在浮动流的最后一个元素中多加一个p标签，在p标签中清除浮动流
2.在最后一个浮动流中清除该元素后面的浮动流(建议使用这种方法)




凡是设置了position:abolute; float:left/right
系统会自动把元素转换成了inline-block

想要实现文字环绕图片的效果，只需要在图片上加上浮动就可以了

*/
div{
    float: left;  /*向左浮动*/
    clear:both     /*清除浮动流,想让该树形生效，必须是块级元素*/
}






/* 伪类选择器honver，当鼠标移入的时候出现什么东西 */
span:hover{
    background-color:#0f0;
}










/* 用border画三角形 */
div{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top-color: transparent;
    border-right-color:transparent;
    border-bottom-color: #0f0;
}


/* 让html标签识别\n(换行）*/
div{
    white-space: pre-line;
}
